<template>
  <div  :style="{ width: '100%', height: '100%', padding: '10px' }" >
    <div v-show="isshow" ref="myChart2" :style="{ width: '100%', height: '100%', padding: '10px' }" ></div>
    <div v-show="!isshow"><img  src="http://likede2-admin.itheima.net/img/empty.87c4f71b.png" alt=""><div>暂无数据</div></div>
  </div>
</template>

<script>
export default {
  props: ['data2'],
  created () {
    console.log('data2', this.data2.series.length)
    if (this.data2.series.length !== 0) {
      console.log('进了吗')
      console.log('接收的data2', this.data2)
      this.option2.series[0].data = this.data2.series.map(item => item / 100)
      this.option2.xAxis.data = this.data2.xAxis
    } else {
      this.isshow = false
    }
  },
  data () {
    return {
      isshow: true,
      option2: {
        tooltip: {
          trigger: 'item',
          formatter: '{b} : 销售额{c} '
        },
        grid: {
          width: '80%'
        },
        title: {
          text: '销售额分布',
          left: 'center',
          top: 'top',
          textStyle: {
            fontSize: 15
          }
        },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          axisTick: {
            length: 2
          }
        },
        yAxis: [{
          type: 'value',
          name: '单位:元',
          offset: -15
        }],
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar',
            barWidth: 15
          }
        ]
      }
    }
  },
  mounted () {
    // console.log('组件接收的data',this.data);

    if (this.data2.series.length !== 0) {
      this.isshow = true
      const myChart = this.$echarts.init(this.$refs.myChart2)
      console.log(myChart)
      window.addEventListener('resize', function () {
        myChart.resize()
      })
      myChart.setOption(this.option2, true)
      console.log('更新后的option', this.option2)
    }
  }

}
</script>
<style scoped></style>
